<script setup lang="ts">
import {IPC_SQLITE_DELETE_GROUP_DATA, IPC_SQLITE_INSERT_GROUP_DATA, IPC_SQLITE_SELECT_GROUP_DATA} from "../../electron/constant.ts";
import {onMounted, reactive, ref} from "vue";

const groupList = ref<Group[]>([])

const group = reactive<Group>({
  id: 0,
  title: '',
  fatherId: 0
})

onMounted(() => {
  console.log('挂载完毕')
  listGroup()
})

const groupId = ref();

interface Group {
  id: number,
  title: string,
  fatherId: number
}

async function insertGroup() {
  console.log('insertGroup')
  const groupId = window.ipcRenderer.invoke(IPC_SQLITE_INSERT_GROUP_DATA, group.title, group.fatherId);
  console.log('groupId:', await groupId);
  group.title = '';
  listGroup();
}

async function delGroup() {
  console.log('delGroup')
  await window.ipcRenderer.invoke(IPC_SQLITE_DELETE_GROUP_DATA, groupId.value);
  groupId.value = null;
  listGroup();
}

async function listGroup() {
  console.log('listGroup')
  const rows = window.ipcRenderer.invoke(IPC_SQLITE_SELECT_GROUP_DATA);
  groupList.value = await rows;
}
</script>

<template>
  <div class="container">

    <div class="header">
        <span>
          <input type="text" v-model="group.title" placeholder="请输入分组名称">
          <button @click="insertGroup">添加分组</button>
        </span>
      <span>
          <input type="text" v-model="groupId" placeholder="请输入分组Id">
          <button @click="delGroup">删除分组</button>
        </span>
      <span>
          <button @click="listGroup">查询分组</button>
        </span>
    </div>

    <div class="content">
      <ul>
        <li
            v-for="group in  groupList"
            key="group.id"
        >
          分组id:{{ group.id }} --------- 分组名称:{{ group.title }}
        </li>
      </ul>
    </div>
  </div>

</template>

<style scoped>
.container {
  height: 100vh;
  width: 100vw;
}

.header {
  height: 50px;
  background: rgba(85, 168, 204, 0.44);
  padding: 10px;
}

.header input {
  margin-right: 3px;
}

.header button {
  margin-right: 20px;
}

ul {
  margin-top: 0;
}

.content {
  background: rgba(190, 245, 168, 0.2);
  height: calc(100vh - 70px);
}
</style>
